import Taro from '@tarojs/taro-rn';
import * as tslib_1 from "tslib";
import React from 'react';
import { Component } from "@tarojs/taro-rn";
import { AtImagePicker } from 'taro-ui';
import { inject, observer } from "@tarojs/mobx-rn";
import { View, Textarea, Input, Text, Form, Button } from "@tarojs/components-rn";
import report_detailStyleSheet from "./report_detail_styles";
// 举报组件
import { getRuntime } from "../../utils/common";
var _styleSheet = report_detailStyleSheet;
let Report = class Report extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pictureArr: [],
      picture: '',
      status: null,
      description: '',
      phoneNumber: '',
      loading: false,
      disabled: false,
      submitText: '立即举报'
    };
  }
  componentDidMount() {
    Taro.setNavigationBarTitle({ title: '举报' });
  }
  onChangeImg(type, e) {
    getRuntime().uploadFile(e, urls => {
      this.setState({
        [type]: urls.join(',')
      });
      getRuntime().showToast('上传图片成功~');
    });
    this.setState({
      [type + 'Arr']: e
    });
  }
  handelRouter(url = '/pages/index/index') {
    getRuntime().navigateTo(url);
  }
  formSubmit(e) {
    let { picture } = this.state;
    let { description, phoneNumber } = e.detail.value;
    let { ComplainStore } = this.props.stores;
    if (!description) {
      getRuntime().showToast('请填写举报内容~');
      return false;
    }
    this.setState({
      loading: true,
      disabled: true,
      submitText: '数据提交中...'
    });
    ComplainStore.pushComplain({
      form: {
        description,
        picture,
        phoneNumber,
        status: 0
      },
      callBack: () => {
        getRuntime().navigateTo('/pages/other/report_success');
      }
    });
  }
  render() {
    let { loading, disabled, submitText, pictureArr } = this.state;
    return <View style={_styleSheet["from-wrap"]}>
        <Form onSubmit={this.formSubmit.bind(this)}>
        <View style={_styleSheet["item-group"]}>
           <Textarea name="description" placeholderClass="placeholder-class" placeholder="请详细描述被举报对象的恶意行为" style={[_styleSheet["from-textarea"], { padding: 0 }]} />
          <View style={[_styleSheet["input-group"], _styleSheet["input-upload"], _styleSheet["bbnone"]]}>
            <View style={_styleSheet["input-name"]}>上传相关图片 <Text style={[_styleSheet["list-small"], _styleSheet["list-desc"]]}>(最多4张)</Text> </View>
            <AtImagePicker length={4} count={2} showAddBtn={true} files={pictureArr} onChange={this.onChangeImg.bind(this, 'picture')} />
          </View>
        </View>
        <View style={[_styleSheet["item-group"], _styleSheet["pt0"], _styleSheet["pb0"]]}>
          <View style={_styleSheet["input-group"]}>
            <View style={_styleSheet["input-name"]}>联系方式</View>
            <Input name="phoneNumber" type="number" maxLength={11} placeholderClass="placeholder_class" placeholder="请填写您的手机号码" style={_styleSheet["from-input"]} />
          </View>
        </View>

        <Button formType="submit" disabled={disabled} loading={loading} style={[_styleSheet["from-submit"], _styleSheet["page-from-submit"]]}>{submitText}</Button>
        </Form>
      </View>;
  }
};
Report = tslib_1.__decorate([inject("stores"), observer], Report);
export default Report;